<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Bootstrap, from Twitter</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<meta name="description" content="">
		<meta name="author" content="">

		<!-- Le styles -->
		<link href="css/bootstrap.css" rel="stylesheet">
		<style>
			body {

			}
			#map_canvas {
				height: 600px;
				max-width: none;
			}
			#map_canvas img {
				max-width: none;
			}
		</style>
		<link href="css/bootstrap-responsive.css" rel="stylesheet">

		<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
		<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->

		<!-- Le fav and touch icons -->
		<link rel="shortcut icon" href="../assets/ico/favicon.ico">
		<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
		<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
	</head>
	<body>

		<div class="container">

			<h1>Prova de mapes.</h1>
			<form class="form-search">
				<input type="text" class="input-medium" id="term1" value="castellar">
				<input type="text" class="input-medium" id="term2" value="terrassa">
				<button type="button" class="btn" id="target">
					Search
				</button>
			</form>
			<div class="row show-grid">
				<div id="map_canvas" class="span12"></div>
			</div>
			<div class="row show-grid">
				<div id="resultat" class="span12"></div>
			</div>

		</div>
		<!-- /container -->

		<!-- Le javascript
		================================================== -->
		<!-- Placed at the end of the document so the pages load faster -->
		<script src="js/jquery.js"></script>
		<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
		
		
		<script type="text/javascript">
			var directionDisplay;

			var directionsService = new google.maps.DirectionsService();
			var map;

			function initialize() {
				directionsDisplay = new google.maps.DirectionsRenderer();
				var chicago = new google.maps.LatLng(41.669, 1.516);
				var myOptions = {
					zoom : 7,
					mapTypeId : google.maps.MapTypeId.ROADMAP,
					center : chicago
				}
				map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
				directionsDisplay.setMap(map);
			}

			function calcRoute(term1, term2) {
				var obj;
				var request = {
					origin : term1,
					destination : term2,
					travelMode : google.maps.DirectionsTravelMode.DRIVING
				};
				directionsService.route(request, function(response, status) {
					
					var marker;
					var auxlat;
					var auxlon;
					if(status == google.maps.DirectionsStatus.OK) {

						var mystr = "";
						for(var i in response.routes) {
							var mylegs = response.routes[i].legs
							for(var j in mylegs) {
								//mystr += mylegs[j].distance.text;
								//mystr += " " + mylegs[j].duration.text + " <br/>";
								mystr += " origen " + mylegs[j].start_location + " <br/>";
							
								auxLatLon = mylegs[j].start_location(lat);
								//mystr += " desti " + mylegs[j].end_location + " <br/>";
								
							}
							mystr += "<br/>";
							$("#resultat").html(mystr);
							/*alert(auxLatLon);
							obj = new String(auxLatLon);
							alert(obj);*/
							//var n=auxLatLon;
						}





      
    for(var i in response.routes){
      var mylegs=response.routes[i].steps
      for(var j in mylegs){
       var marker = new google.maps.Marker({
        position: myRoute.steps[i].start_point,
        map: map
      });
      
               }
               alert(marker.position.lat())
     
    }
		

						directionsDisplay.setDirections(response);
						retornar(obj);
					}
				});
			}


			$(document).ready(function() {
				initialize();

				$("#target").click(function() {
					term1 = $('#term1').val();
					term2 = $('#term2').val();

					calcRoute(term1, term2);
					//retornar();
				});
			});

			/*function showDirections(term1, term2) {//COLOCA LA RUTA
				directionsDisplay = new google.maps.DirectionsRenderer({
					map : map,
					preserveViewport : true,
					draggable : true
				});
				//directionsDisplay.setPanel(document.getElementById('textbox'));
				var sampleRequest = {
					origin : term1,
					destination : term2,
					travelMode : google.maps.TravelMode.DRIVING,
					unitSystem : google.maps.UnitSystem.METRIC
				};
				directionsService.route(sampleRequest, function(response, status) {
					if(status == google.maps.DirectionsStatus.OK) {
						directionsDisplay.setDirections(response);
					}
				});
			}*/

			function retornar(obj) {//FA LA CRIDA CAP AL PHP
				obj = (obj.slice(1, obj.length - 1)).split(',');
				//term = $('#term').val();
				alert();
				$.post("provaMaps2.php", {
					nom : obj
				}, function(data) {
					alert("Data Loaded: " + data);
				});
			};
		</script>
	</body>
</html>

